<template>
  <div>
    <RouteTitle isBack />
    <a-row class="content">
      <a-form
        :label-col="{
          span: 6,
        }"
      >
        <a-form-item label="用户名称" v-bind="validateInfos.name">
          <a-input
            v-model:value="modelRef.name"
            placeholder="请输入个人昵称"
            style="width: 500px"
            disabled
          />
        </a-form-item>
        <a-form-item label="旧密码" v-bind="validateInfos.oldPwd">
          <a-input
            v-model:value="modelRef.oldPwd"
            placeholder="请输入旧密码"
            style="width: 500px"
          />
        </a-form-item>
        <a-form-item label="新密码" v-bind="validateInfos.pwd">
          <a-input
            v-model:value="modelRef.pwd"
            placeholder="请输入新密码"
            style="width: 500px"
          />
        </a-form-item>
        <a-form-item label="确认新密码" v-bind="validateInfos.newPwd">
          <a-input
            v-model:value="modelRef.newPwd"
            placeholder="请输入确认新密码"
            style="width: 500px"
            disabled
          />
        </a-form-item>
      </a-form>
      <a-col
        :span="24"
        style="
          text-align: center;
          border-top: 1px solid #efeff5;
          padding-top: 20px;
        "
      >
        <a-button
          type="primary"
          style="border: none; border-radius: 6px"
          @click="submitClick"
        >
          确定
        </a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import {} from "@ant-design/icons-vue";
import { Form, message } from "ant-design-vue";

const useForm = Form.useForm;

export default defineComponent({
  name: "Userinfo",
  components: {},
  setup() {
    const state = reactive({
      count: 0,
      logoList: [],
    });

    const modelRef = reactive({
      name: "",
      oldPwd: "",
      pwd: "",
      newPwd: "",
    });
    const rulesRef = reactive({
      name: [
        {
          required: true,
          message: "请输入个人昵称",
        },
      ],
      oldPwd: [
        {
          required: true,
          message: "请输入旧密码",
        },
      ],
      pwd: [
        {
          required: true,
          message: "请输入新密码",
        },
      ],
      newPwd: [
        {
          required: true,
          message: "请输入确认密码",
        },
      ],
    });
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    const submitClick = () => {
      validate().then(() => {});
    };

    return {
      ...toRefs(state),
      validateInfos,
      resetFields,
      modelRef,
      submitClick,
    };
  },
});
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #f0efef;
  border-radius: 10px;
  background: rgba(255, 255, 255);
}
</style>
